<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <el-table :data="dataTable" border style="width: 100%">
          <el-table-column label="序号">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column label="组题时间">
            <template slot-scope="scope">
              <span>{{scope.row.addTime}}</span>
            </template>
          </el-table-column>
          <el-table-column label="用户名">
            <template slot-scope="scope">
              <span>{{scope.row.userName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="试题ID">
            <template slot-scope="scope">
              <span>{{scope.row.questionIDs[0]}}</span>
            </template>
          </el-table-column>
          <el-table-column label="答题进度">
            <template slot-scope="scope">
              <span>{{scope.row.progressOfAnswer}}</span>
            </template>
          </el-table-column>
          <el-table-column label="正确率">
            <template slot-scope="scope">
              <span>{{scope.row.accuracyRate}}</span>
            </template>
          </el-table-column>
          <el-table-column label="答题总耗时(秒)">
            <template slot-scope="scope">
              <span>{{scope.row.totalSeconds}}</span>
            </template>
          </el-table-column>
          <el-table-column label="组题类型/详情">
            <template slot-scope="scope">
              <span>{{scope.row.questionType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="text-align:center;margin-top:30px"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="requestParameters.page"
          :total="total"
          :page-size="requestParameters.pagesize"
          :page-sizes="[5,10]"
          layout="prev, pager, next, sizes, jumper"
        ></el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
export default {
  name: 'QuestionsRandoms',
  data() {
    return {
      // 请求参数
      requestParameters: {
        page: 1,
        pagesize: 10,
        keyword: null
      },
      alertText: '',
      // 列表数据
      dataTable: [],
      // 总条数
      total: 0
    }
  },
  created() {
    // 获取列表数据
    this.getTable()
  },
  methods: {
    // 删除列表数据
    del(id) {
      console.log(id)
      this.$confirm('此操作将永久该组题,' + ' 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
         const res = await removeRandoms({id})
         console.log(res)
          this.$message.success('删除成功')
          this.getTable()
        })
        .catch(() => {})
    },
    // 获取列表数据
    async getTable() {
      console.log(this.requestParameters)
      const { data } = await randoms(this.requestParameters)
      console.log(data)
      // const {data} = await axios.get('/questions/randoms/?')
      // 自己处理返回数据，如果接口不好用的话 （ 每一页开始的位置*每一页显示的条数）
      // items.splice((this.requestParameters.page - 1) * this.requestParameters.pagesize, this.requestParameters.pagesize)
      this.dataTable = data.items
      // // 获取总条数
      this.total = data.counts
      
      this.alertText = `共${this.total}条数据`
    },
    // 切换每页显示信息条数
    handleSizeChange(size) {
      this.requestParameters.pagesize = size
      this.requestParameters.page = 1
      this.getTable()
    },
    // 切换页码
    handleCurrentChange(page) {
      this.requestParameters.page = page
      console.log(page)
      console.log(this.requestParameters.page)
      this.getTable()
    }
  }
}
</script>

<style scoped>
</style>
